<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta charset="UTF-8">
    <title>Cola-UI 客户端框架</title>
    <base href="/">
    <link rel="stylesheet" type="text/css" href="./resources/nprogress/nprogress.css">
    <script src="./resources/nprogress/nprogress.js"></script>
    <link rel="stylesheet" type="text/css" href="./resources/cola-ui/semantic.css">
    <link rel="stylesheet" type="text/css" href="./resources/cola-ui/cola.css">
    <link rel="stylesheet" type="text/css" href="./common/common.css">
    <link rel="stylesheet" type="text/css" href="site.css">
  </head>
  <body>
    <script type="text/javascript">
      NProgress.configure({showSpinner: false, minimum: 0.3})
      NProgress.start();
    </script>
    <h2>Colors</h2>
    <ul class="colors">
      <li>
        <div class="primary-background"></div>
        <div class="light-primary-background"></div>
        <div class="dark-primary-background"></div>
      </li>
      <li>
        <div class="secondary-background"></div>
        <div class="light-secondary-background"></div>
        <div class="dark-secondary-background"></div>
      </li>
      <li>
        <div class="tertiary-background"></div>
        <div class="light-tertiary-background"></div>
        <div class="dark-tertiary-background"></div>
      </li>
      <li>
        <div class="fourthly-background"></div>
        <div class="light-fourthly-background"></div>
        <div class="dark-fourthly-background"></div>
      </li>
      <li>
        <div class="fifthly-background"></div>
        <div class="light-fifthly-background"></div>
        <div class="dark-fifthly-background"></div>
      </li>
    </ul><br>
    <h2>Font</h2>
    <div class="font-color">
      <div>文字基本大小</div>
      <h1>头部内容1</h1>
      <h2>头部内容2</h2>
      <h3>头部内容3</h3>
      <h4>头部内容4</h4><small>small标签小字体</small>
    </div><br>
    <h2>Link 链接定义</h2>
    <div class="link-color"><a class="primary">普通链接</a><a class="secondary">高亮链接</a><a class="tertiary">对称高亮链接</a></div><br>
    <h2>背景色定义</h2>
    <ul class="background-colors">
      <li>
        <div class="default">普通背景</div>
      </li>
      <li>
        <div class="light">浅背景</div>
      </li>
      <li>
        <div class="dark">深背景</div>
      </li>
      <li>
        <div class="content">内容区域背景</div>
      </li>
    </ul><br>
    <h2>描述文本颜色</h2>
    <p class="description">赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。</p>
    <p class="secondary-description">LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。</p>
    <p class="tertiary-description">LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。</p>
  </body>
  <script src="./resources/jquery/jquery-2.1.3.js"></script>
  <script src="./resources/jquery/jquery.cookie.js"></script>
  <script src="./resources/cola-ui/3rd.js"></script>
  <script src="./resources/cola-ui/semantic.js"></script>
  <script src="./resources/cola-ui/cola.js" charset="UTF-8"></script>
  <script src="./common/common.js"></script>
</html>